{extend name="layout" /}

{block name="content"}
<style>
    .bs-bars{
        width:100%;
    }
</style>
<div style="margin: 15px;">
    <blockquote class="layui-elem-quote">
        <h1>商品列表</h1>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>查询条件</legend>
        <form action="" class="layui-form">
            <div class="layui-form-item" style="width: 90%;">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-inline">
                    <input id="name" type="text" name="name" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
                </div>
                <button id="searchSubmit" class="layui-btn">
                    <i class="fa fa-search" data-icon="fa-search"></i>
                    查询
                </button>
            </div>
        </form>
    </fieldset>

    <div id="toolbar">
        <button style="float:right;margin-right: 10px" onclick="addTab()" class="layui-btn layui-btn-normal">添加商品</button>
        <button id="refresh" class="layui-btn">
            <i class="fa fa-refresh" data-icon="fa-refresh"></i>
            刷新表格
        </button>
        <div class="layui-input-inline" style="width: 60px">
            <input id="page" class="layui-input" type="number" value="1" min="1" max="3">
        </div>
        <button id="selectPage" class="layui-btn">跳页</button>

    </div>
    <table id="table"
           data-toggle="table"
           data-height="460"
           data-toolbar="#toolbar"
           data-pagination="true"
           data-side-pagination="server"
           data-page-size="10"
           data-ajax="ajaxRequest">
        <thead>
        <tr>
            <th data-field="id">id</th>
            <th data-field="name">商品名称</th>
            <th data-field="main_img_url" data-formatter="img">商品图片</th>
            <th data-field="category.name">商品分类</th>
            <th data-field="price">价格</th>
            <th data-field="stock">库存</th>
            <th data-field="" data-formatter="formAction">操作</th>
        </tr>
        </thead>
    </table>
</div>
{/block}

{block name="script"}
<script>
    var $page = $('#page'),
        $button = $('#selectPage'),
        $refresh = $('#refresh');
    $refresh.click(function(){
        $table.bootstrapTable('refresh');
    });
    $button.click(function () {
        $table.bootstrapTable('selectPage', +$page.val());
    });

    var $table = $('#table');
    
    function sex(value,row,index) {
        if( value === 1 ){
            return '男';
        }else{
            return '女'
        }
    }

    function formAction(value,row,index) {
        var name = "'"+row.name+"'";
        return '<a onclick="editTab('+name+','+row.id+')">编辑</a>' +
            '&nbsp;&nbsp;&nbsp;' +
            '<a onclick="del('+row.id+')">删除</a>';
    }

    function img(value,row,index) {
        return '<img src="'+value+'" width="30px"></img>'
    }

    function addTab(){
        parent.tab.tabAdd({
            "title": '添加商品',
            "icon": "&#xe609;",
            "href": "/admin/product/add"
        });
    }

    function editTab(name,id) {
        parent.tab.tabAdd({
            "title": name,
            "icon": "&#xe609;",
            "href": "/admin/product/edit?id="+id+""
        });
    }

    $('#searchSubmit').click(function(){
        $table.bootstrapTable('selectPage', 1);
        return false;
    });
    //请求数据
    function getData(data){
        var json;
        var form = $('.layui-form').find('input,select');
        var len = form.length;
        var req = {};
        for(var i = 0; i < len; i++){
            var key = form.eq(i).attr('name');
            var val = form.eq(i).val();
            req[key] = val;
        }
        req.limit = data.limit;
        req.offset = data.offset;
        $.ajax({
            type:"post",
            url:"/admin/product/getProductAll",
            data:req,
            dataType:"json",
            async:false,
            success:function(res){
                json = res;
            }
        });
        return json;
    }
    function ajaxRequest(params){
        //得到数据
        var json = getData(params.data);
        //分配数据
        params.success({
            total:json.data.total,
            rows:json.data.list
        });
    }


    layui.use(['form', 'laydate'], function() {
        var form = layui.form(),
            layer = layui.layer,
            laydate = layui.laydate;

        form.on('select(country)',function(data){
            listenSelect(form,data)
        });

    });

</script>
{/block}